<template>
    <div class="content">
        <TableLayout form-title="">
            <div slot="form-title" class="table-title"></div>
            <el-form :model="formInline" :rules="rules" class="formInline" ref="formInline"
            label-width="76px" slot="form">
                <el-row :gutter="41">
                   <el-col :span="8">
                        <el-form-item label="评论人"  prop="name">
                            <el-input v-model="formInline.name" placeholder="请输入评论人"></el-input>
                        </el-form-item> 
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="评论时间">
                            <el-row>  
                                <el-col :span="11">
                                    <el-date-picker :editable="false" v-model="formInline.startDate" type="date" format="yyyy-MM-dd" placeholder="选择开始日期" :picker-options="formInline.pickerOptions1" @change="dateChange1" style="width:100%">
                                    </el-date-picker>
                                </el-col>
                                <el-col :span="2" align="center">至</el-col>
                                <el-col :span="11">
                                    <el-date-picker :editable="false" v-model="formInline.endDate" type="date" placeholder="选择结束日期" :picker-options="formInline.pickerOptions2"  @change="dateChange2" style="width:100%">
                                    </el-date-picker>
                                </el-col> 
                            </el-row>             
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="e学云ID号" prop="exueCode">
                            <el-input v-model="formInline.exueCode" placeholder="请输入e学云ID号"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <div class="top-line">
                    <el-button type="primary" @click="search('formInline')">查询</el-button>
                </div>
            </el-form>
            <div class="table-title" slot="table-title">
                <div class="btnPosition">
                </div>
            </div>
            <el-table :data="AnnounceList" border style="width: 100%" v-loading="loading"  @sort-change="sortChange">
                 <el-table-column label="评论时间" align='center' min-width="110">
                     <template scope="scope">
                        {{scope.row.time || '--'}}
                    </template>
                </el-table-column>
                 <el-table-column label="评论人" align='center'>
                     <template scope="scope">
                       {{scope.row.name || '--'}}
                    </template>
                </el-table-column>
                <el-table-column label="e学云ID号" align='center' min-width="100px">
                    <template scope="scope">
                        {{scope.row.exueCode||'--'}}
                    </template>
                </el-table-column>
                <el-table-column label="身份" align='center'>
                     <template scope="scope">
                        {{scope.row.relation||'--'}}
                    </template>
                </el-table-column>
                <el-table-column label="评论内容" align='center'>
                    <template scope="scope">
                        <el-button type="text" class="btn-success" @click="checkDetail(scope.row.comment)">详情</el-button>
                    </template>
                </el-table-column>
                <el-table-column label="评论对象" align='center'>
                     <template scope="scope">
                        {{scope.row.commentPoint||'--'}}
                    </template>
                </el-table-column>
                <el-table-column label="状态" align='center'>
                     <template scope="scope">
                        {{scope.row.status=='0'?'隐藏':scope.row.status=='1'?'显示':'--'}}
                    </template>
                </el-table-column>
                 <el-table-column label="操作" width="90" align='left'>
                    <template scope="scope">
                        <el-button type="text" class="btn-success" 
                        @click="showOrHide(scope.row)"> 
                        {{scope.row.status=='1'?'隐藏':scope.row.status=='0'?'显示':'--'}}
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination-container" style="text-align:right">
                <el-pagination layout="total, sizes, prev, pager, next, jumper" :total="listQuery.total" :current-page.sync="listQuery.page" :page-sizes="config.pageSizes" :page-size="config.pageSize" @size-change="handleSizeChange" @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </TableLayout>
    </div>
</template>

<script>
// import { getTeachersByPage, batchDeleteTeacher, getSchoolTypeById, batchDeleteTeacherProgress, batchImportForTeacherProgress} from 'api/teacherManage';
import TableLayout from 'components/TableLayout';
import { mapState, mapActions, mapGetters } from 'vuex';
import validate from '@/utils/validate';
import {pageLiveComment, updateComment} from 'api/deviceManagement';
import moment from 'moment';
export default {
    name: 'teacherActiveList',
    components: { TableLayout},
    data() {
        return {
            loading: true,
            formInline: { // 查询 表单数据
              
                name: '',
                exueCode: '',
                startDate: '', // 开始时间默认为开通当天，结束时间为系统当前时间
                endDate: '', 
                // endDate: new Date(), 
                // pickerOptions1: {},
                // pickerOptions2: {}
                pickerOptions1: {
                    disabledDate(time) {
                        return time.getTime() > new Date().getTime();
                    }
                },
                pickerOptions2: {
                    disabledDate(time) {
                        return time.getTime() < new Date().getTime() - 864e5;
                    }
                }
              
            },
          
            listQuery: {// 分页
                page: 1,
                total: 0
            },
            AnnounceList: [],
            rules: {
                exueCode: [...validate.exueCode()]
            }
        }
    },
    computed: {
        ...mapState({
            config: state => state.config.table,
            cacheUpdated: state => state.app.cacheUpdated// 局部刷新列表

        }),
        ...mapGetters([
            'uid',
            'schoolId',
            'schoolType',
            'schoolName'
        ])
    },
    watch: {// 局部刷新列表
        cacheUpdated(val) {
            val && this.searchFetchData();
        }
    },
    // 初始化
    created() {
        this.searchFetchData();
    },
    methods: {
        // 全局获取行数classStudent
        ...mapActions(['ChangePageSize']),
          // 显示还是隐藏
        showOrHide(row) {
            let isHide='';
            let confirmInfo='';
            if (row.status=='1') { // 原来是显示
                isHide='0'; // 隐藏
                confirmInfo='隐藏'
            } else {
                isHide='1';
                confirmInfo='显示'
            }
            this.$confirm(`确认${confirmInfo}此评论？`, ' ', {
                confirmButtonText: '确定',
                cancelButtonText: '取消'
            }).then(() => {
                this.loading = true;
                let json={
                    id: row.id,
                    isHide// 是否隐藏（0隐藏1显示）
                }
                updateComment(json).then(res => {                                     
                    this.searchFetchData();
                    this.$message({
                        type: 'success',
                        message: `${confirmInfo}成功!`
                    });
                }).catch(() => {
                    this.loading = false;
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });
        },
       // 查看详情
        checkDetail(comment) {
            this.$alert(comment, '评论内容', {
                confirmButtonText: '确定',
                callback: action => {
                    this.editArticle();
                }
            });
        },
       
        // 点击查询 
        search(ruleForm) {
            this.$refs[ruleForm].validate((valid) => {
                if (valid) {
                    this.listQuery.page = 1;
                    this.loading = true;
                    this.searchFetchData();
                } else {
                    return false;
                }
            });
        },

      
        // 查询列表
        searchFetchData() {
            this.loading = true;
            let classId='';
            let schoolId='';
            if (this.$route.params.status=='1') {// 学校区域过来的 传的id是班级id
                classId=this.$route.params.id;
            }
            if (this.$route.params.status=='2') {// 公共区域过来的 传的id是学校id
                schoolId=this.schoolId;
            }
            let json={
                page: this.listQuery.page,
                rows: this.config.pageSize,
                classId,
                schoolId,
                name: this.formInline.name,
                exueCode: this.formInline.exueCode,
                startTime: this.formInline.startDate?moment(this.formInline.startDate).format('YYYY-MM-DD'):'',
                endTime: this.formInline.endDate?moment(this.formInline.endDate).format('YYYY-MM-DD'):''
            }
            pageLiveComment(json).then(res => {
                this.loading = false;
                this.AnnounceList = res.data.content.list;
                this.listQuery.total = res.data.content.pagination.total;
            }).catch(() => {
                this.loading = false;
            });
        },
      
        sortChange({ column, prop, order }) {
            // "maxCount" "ascending"升序
            // "maxCount" "descending"降序
            // “sequencingType”: “排序类型 （0.售出数量 1.库存数量 2.创建时间）”,
            // “sequencingStatus”: “排序状态 (0.升序 1.降序)”
            // this.sequencingType=prop=='maxCount'?'0':prop=='remainCount'?'1':prop=='createTime'?'2':'';
            // this.sequencingStatus=order=='ascending'?'0':order=='descending'?'1':'';
            // this.searchFetchData(this.sequencingType, this.sequencingStatus)
        },
          // 开始日期選擇
        dateChange1(date) {
            this.formInline.pickerOptions2 = {
                disabledDate(time) {
                    return time.getTime() < new Date(date).getTime()- 864e5;
                }
            }
        },
        // 结束日期选择
        dateChange2(date) {
            this.formInline.pickerOptions1 = {
                disabledDate(time) {
                    return time.getTime() > new Date(date).getTime() - 864e5;
                }
            }
        },

       
        // 分页
        handleSizeChange(val) {
            this.loading = true;
            this.listQuery.page = 1;
            this.ChangePageSize(val);
            this.searchFetchData();
        },
        handleCurrentChange(val) {
            this.loading = true;
            this.listQuery.page = val;
            this.searchFetchData();
        }
    }
}
</script>
<style lang="scss">
.content {
    position: relative;
    padding: 0px;
    $bgcolor: #fff;
    .formInline {
        .formBtn {
            width: 100%;
            height: 70px;
            border-top: 1px solid #dddddd;
            position: relative;
            .btnPosition {
                position: absolute;
                right: 0px;
                top: 18px;
            }
        }
    }
}
</style>